<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数组用法</title>
	</head>
	<body>
		
		<div id="app">
			<span v-for="num in array"> {{num}}</span>
			<hr />
			<input type="text" name="num" v-model="num"/>
			<button @click="add">添加</button>
			<button @click="del">删除</button>
			<button @click="shift">删除第一个</button>
			<button @click="upshift">从第一个元素添加</button>
			<button @click="splice">替换数据</button>
			<button @click="sort">排序</button>
			<button @click="reverse">反转</button>
		</div>
		
		<!--引入js函数类库  -->
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el : "#app",
				data : {
					array: [4,2,3,1,5],
					num: ''
				},
				methods:{
					add(){
						this.array.push(this.num)
					},
					del(){
						this.array.pop()
					},
					shift(){
						this.array.shift()
					},
					upshift(){
						this.array.unshift(this.num)
					},
					splice(){
						//参数说明: 1.操作数据起始位置  2. 操作数量  3.替换元素的值(如果不写表示删除)
						//将第二位进行替换
						//this.array.splice(1,1,this.num)
						//删除第二位数据
						this.array.splice(1,1)
					},
					sort(){
						//数组从小到大
						this.array.sort()	
					},
					//数组反转
					reverse(){
						this.array.reverse()
					}
				}
			})
		</script>
	</body>
</html>
